<template>
    <div class="wrapper" ref="wrapper">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
  name: 'CodeCategory',
  components: {},
  directives: {  },
  data() {
    return {
       scroll:null
    };
  },
  created() {
  },
  mounted() {
      this.scroll=new BScroll(this.$refs.wrapper,{   
          click: true,
          pullUpLoad:true,
          
          probeType:3 //0,1都不侦测实时位置  2手指滚动时侦测但不侦测惯性滑动    3都侦测
      })
      this.scroll.on('scroll', (position) => {
          console.log(position.x, position.y);
      })
      this.scroll.on('pullingUp', (position) => {
          // await fetchData()异步请求数据
          console.log('ddd');
          this.scroll.finishPullUp()
      })
  },
  methods: {
    
  },
};
</script>
<style scoped>
.wrapper{
  height:400px;
  overflow: hidden;
  overflow-y: scroll;
}
li{
  background: pink;
  margin-bottom: 5px;
  height:20px;
}
</style>